<template>
	<view>
		<u-image :src="realSrc" :mode="mode" :width="iWidth" :height="iHeight" :radius="radius"></u-image>
	</view>
</template>

<script>
	import {BASE_URL} from '@/utils/config.js'
	export default {
		name:"my_image",
		data() {
			return {
				iWidth: 0,
				iHeight: 0
			};
		},
		props:{
			src: {
				type: String,
				default: ''
			},
			width: {
				type: [String, Number],
				default: 50
			},
			height: {
				type: [String, Number],
				default: 50
			},
			size: {
				type: [String, Number],
				default: 0
			},
			mode: {
				type: String,
				default: 'aspectFill'
			},
			radius: {
				type: [String, Number],
				default: 0
			},
			network: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			realSrc(){
				if(this.network && this.src.indexOf('http') === -1){
					let src = this.src.replace(/^\//, '')
					return `${this.STATIC_URL}${src}`
				}else{
					return this.src
				}
			}
		},
		mounted() {
			this.initSize()
		},
		methods: {
			initSize(){
				let sizeExt = ['rpx', 'px', '%', 'auto']
				if(this.size){
					this.iWidth = this.size
					this.iHeight = this.size
					return
				}
				if(typeof this.width !== 'number'){
					this.iWidth = this.hasCode(sizeExt, this.width) ? this.width : this.width + 'rpx'
				}else{
					this.iWidth = this.width
				}
				if(typeof this.height !== 'number'){
					this.iHeight = this.hasCode(sizeExt, this.height) ? this.height : this.height + 'rpx'
				}else{
					this.iHeight = this.height
				}
			},
			hasCode(arr, str){
				let flag = false
				flag = arr.findIndex(item=>str.indexOf(item)) !== -1
				return flag
			}
		}
	}
</script>

<style>

</style>